<template>
    <div class="Card3_body" :style="{
        width: props.width
    }">
        <div class="imgBox">
            <el-image style="width:100%" :src="props.url" />
        </div>
        <div class="">
            <div class="title">
                {{ title }}
            </div>
            <div class="discount">
                <span>¥{{ discount }}</span>
                <span class="desc">{{ props.discount.toFixed(1) }}折</span>
            </div>
        </div>
        <div>
            <div class="num">
                货号： {{ num }}
            </div>
            <div class="price">
                ¥{{ price }}
            </div>
        </div>
    </div>

</template>


<script setup>
import { onMounted, ref, computed } from 'vue';
const props = defineProps({
    url: String,
    title: String,
    price: Number,
    discount: Number,
    num: String,
    width: String,

})

const title = computed(() => {
    return props.title;
})
const price = computed(() => {
    return props.price.toFixed(2);
})
const discount = computed(() => {
    return (props.price * props.discount).toFixed(2);
})
const num = computed(() => {
    return props.num;
})
onMounted(() => {

})
</script>

<style scoped lang="scss">
.Card3_body {
    & .imgBox{
        border-radius: 24px;
        overflow: hidden;
    }
    &>:nth-child(2) {
        margin: 6px 0px;
    }

    &>:nth-child(2),
    &>:nth-child(3) {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        line-height: 28px;
    }

    & .discount {
        font-weight: bold;
        font-size: 20px;

        & .desc {
            background-color: #FDDB00;
            margin-left: 6px;
            padding: 0px 4px;
        }
    }
}
</style>